<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>还款</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />
    <style>
        body{
            width: 3.75rem;
            /*height: 6rem;*/
            background: #3276FE;
        }
        .cells_title {
            margin: 0;
            padding: .12rem .4rem;
            font-size: .16rem;
            height: .22rem;
            color: rgb(68,74,89);
        }
        .cells_title a {
            display: block;
            float: left;
            font-size: .16rem;
            height: .22rem;
            font-weight: 700;
        }
        .cells_title span {
            display: block;
            float: left;
            font-size: .13rem;
            height: .22rem;
            line-height: .22rem;
            margin-left: .2rem;
            color: rgb(136,136,136)
        }
        .operatorContent {
            width: 100%;
            overflow: hidden;
            margin-top: 4.25rem;
        }
        .txt {
            text-align: right;
            font-size: .12rem;
        }

        .getCode {
            color: #2AD2C8;
            font-size: .12rem;
        }

        .cell_ft img {
            display: block;;
            width: .2rem;
            height: .1rem;
        }
        .tip {
            line-height: .2rem;
            height: .2rem;
            overflow: hidden;
            margin: .2rem .4rem;
        }
        .tip span{
            display: block;
            float: left;
            font-size: .12rem;
            line-height: .2rem;
            height: .2rem;
        }
        .tip i {
            display: block;
            width: .12rem;
            height: .12rem;
            margin: 0.02rem .04rem;
            float: left;
        }
        .tip i img {
            width: 100%;
        }
        .cells_tips {
            margin: 0rem .4rem 0.25rem;
            font-size: .12rem;
            color: #fff;
            height: .4rem;
            line-height: .4rem;
        }

        .submitBtn {   
            width: 100%;
            font-size: .15rem;
            position: static;
            border-radius: 0;
            box-shadow: 0 0rem 0rem rgb(214,193,192);
            background:#FFB624;
        }
        .cells_line {
            height: .1rem;
            width: 100%;
        }
        .repayTop3 {
            background-color: rgba(255, 255, 255, 0.4);
            padding: .16rem .26rem 0;
            height: .49rem;
            line-height: .2rem;
            font-size: .12rem;
            color: #fff;
            margin-bottom: .1rem;
        }
        .cell_hd {
            font-size: .14rem;
        }
        .bluBg{
            width: 3.43rem;
            height: .2rem;
            background:#1752C6;
            margin: 0 auto;
            border-radius: .1rem;
            position: relative;
        }        
        .cells {
            width: 3.11rem;
            margin-bottom: .1rem;
            position: absolute;
            left: 50%;
            top: 10px;
            transform: translate(-50%,0);
            border-radius: 0 0 .14rem .14rem;
            box-shadow: 0px 8px 10px #0F4FCF
        }
        .cell_Icon {
            float: right;
            width: .24rem;
            height: .24rem;
            background: url(../img/selected1.png) no-repeat center;
            background-size: 100%;
        }
        .cell{
            padding: .13rem .22rem .1rem;
        }
        .cell:before{
            left: .05rem;
        }
        .cell_Icon i {
            float: right;
            background: url(../img/selected2.png) no-repeat center;
            background-size: 100%;
            width: .24rem;
            height: .24rem;
            border-radius: .037rem;
        }

        .cells_tips a {
            color: #fff;
        }
        .pwd-box{  
            margin: 0rem auto;
            width: 95%;  
            padding-left: 6px;  
            position: relative;  
            border: 1px solid #9f9fa0;  
 
            over-flow: hidden;
            height: .4rem;
        }  
        .pwd-box input[type="tel"]{  
            width: 100%;  
            height: 45px;  
            color: transparent;  
            position: absolute;  
            top: 0;  
            left: 0;  
            border: none;  
            font-size: 18px;  
            opacity: 0;  
            z-index: 1;  
            letter-spacing: 35px;  
        }  

        .fake-box input{  
            width: .31rem;  
            height: .4rem;  
            border: none;  
            border-right: 1px solid #e5e5e5;  
            text-align: center;  
            font-size: 30px;  
        }  
        .fake-box input:nth-last-child(1){  
            border:none;  
        }
        .layer_dialog_box {
            padding: .1rem 0;
        }
        .layer_btn {
            display: block;
            position: relative;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: center;
            letter-spacing: 1px;
            color: #353535;
            font-size: .15rem;
            width: 1.5rem;
            border-radius: .24rem;
            background-color: #eee;
            margin: 0rem .2rem;
        }

            .layer_btn.layer_btn_primary {
                background-color: rgb(255,85,78);
                color: white;
            }

            .layer_btn + .layer_btn:after {
                content: " ";
                position: absolute;
                left: 0;
                top: 0;
                width: 1px;
                height: 100%;
                border-left: 0px solid white;
                color: #E4E4E4;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scaleX(.5);
                transform: scaleX(.5);
            }
        .layer_dialog .layer_dialog_ft {
            width: 2.5rem;
            position: relative;
            line-height: .42rem;
            font-size: .17rem;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            background-color: white;
        }

            .layer_dialog .layer_dialog_ft::after {
                content: " ";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 1px;
                border-top: 0px solid white;
                color: #E4E4E4;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
            }
        .layer_dialog_title {
            font-weight: 700;
        }

        .repayMethd{
            color: #939494;
        }
        .disOn {
            display: block;
        }
        .bankNameTest {
            display: none;
        }
        .repayDate{
            height: .45rem;
            line-height: .45rem;
            text-align: center;
            background: #EAF1FF;
        }
        .repayMoney h6{
            width: 100%;
            text-align: center;
            font-size: .12rem;
        }
        .repayMoney{
            height: .8rem;
            padding-top: .24rem;
            position: relative;
        }
        .halfCirl{
            width: .17rem;
            height: .17rem;
            background: #3276FE;
            border-radius: 50%;
            position: absolute;
            bottom: -8px;
        }
        .halfCirlLeft{
            left: -10px;
        }
        .halfCirlRight{
            right: -10px;
        }
        .cellFirst::before{
            border-top: 1px dashed #464545;
        }
        .repayTatal{
            font-size: .23rem;
            color: #3276FE;
            font-family: PingFang-SC-Regular;
        }
        header{
            width: 100%;
            height: .44rem;
            line-height: .44rem;
            position: fixed;
            left: 0;
            top: 0;
            background: #3276fe;
        }
        header img,
        header span{
             display: inline-block;
             float: left;
        }
        header .backIcon{
            width: .24rem;
            height: .24rem;
            margin: .1rem 0 0 .16rem;
        }
        header .pageTitle{
            width: 80%;
            text-align: center;
            color: #fff;
            font-size: .17rem;
        }
        header .refresh{
            float: right;
            margin-right: .16rem;
            font-size: .14rem;
            color: #fff;
        }        
    </style>
</head>
<body>
    <!-- 蒙版 -->
    <div class="layer_load">
        <div class="layer_mask"></div>
        <div class="layer_load_icon icon-loading"></div>
    </div>
    <!--<header>
            <a href="applyRecord.html"><img class="backIcon" src="../img/backIcon.png" /></a>
            <span class="pageTitle">还款</span>
            <span class="refresh"></span>
    </header>-->
    <div class="repaymentContent">
        <div class="repayTop3">您发起还款申请后，我们会实时扣款，请确保您的银行卡余额充足，多次扣款失败可能会导致您还款失败。
        </div>
    </div>
    <h6 class="bluBg">
        <div class="cells">
            <h6 class="repayDate"> </h6>
            <div class="repayMoney">
                    <h6 class="repayTop1"><span class="repayTatal"></span>元</h6>
                    <h6 class="repayTopName">应还金额</h6>
                    <div class="halfCirl halfCirlLeft"></div>
                    <div class="halfCirl halfCirlRight"></div>
            </div>
            <div class="cell cellFirst">
                <label class="cell_hd">编号：</label>
                <div class="cell_cn">
                    <input type="text" class="txt" placeholder="" readonly="" maxlength="20" value=""/>
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">本金：</label>
                <div class="cell_cn">
                    <input type="text" class="txt" placeholder="" readonly="" maxlength="20" value=""/>
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">利息：</label>
                <div class="cell_cn">
                    <input type="text" class="txt" placeholder="" readonly="" maxlength="20" value=""/>
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">还款方式</label>
                <div class="cell_cn"> 
                    <input type="text" class="txt repayMethd" placeholder="一次性还款付息" readonly="" maxlength="20"  />
                </div>
            </div>
            <!--<div class="cell lastCell">
                <label class="cell_hd">还款账户</label>
                <div class="cell_cn">
                    <input type="text" class="txt" placeholder="请输入还款账户"  maxlength="20" />
                </div>
            </div>-->
            <div class="cells_content">
                <div class="cell">
                    <label class="cell_hd">支付宝还款</label>
                    <div class="cell_cn">
                        <div class="cell_Icon"><i></i></div>
                    </div>
                </div>
                <div class="cell test">
                    <label class="cell_hd">线下还款（支付宝）</label>
                    <div class="cell_cn">
                        <div class="cell_Icon"></div>
                    </div>
                </div>
            </div>
        </div>
    </h6>    
    <div class="operatorContent confirmBtn">
        <div class="cells_tips">
                <span>如多次扣款失败？</span><a>请点击</a>
        </div>
        <div class="submitBtn">
            提交
        </div>
    </div>
    <!-- <div class='layer_dialog confirm'>
        <div class='layer_mask'></div>
        <div class='layer_dialog_box'>
            <div class='layer_dialog_hd'>
                <span class='layer_dialog_title'>交易密码</span>
                <i class='layer_btn_close icon-close' style='display:none'></i>
            </div>
            <div class='layer_dialog_cn'>
                <div class="pwd-box">
                    <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">  
                    <div class="fake-box">  
                        <input type="password" readonly="">  
                        <input type="password" readonly="">  
                        <input type="password" readonly="">  
                        <input type="password" readonly="">  
                        <input type="password" readonly="">  
                        <input type="password" readonly="">  
                    </div>  
                </div>
            </div>
            <div class='layer_dialog_ft'>
                <a class='layer_btn'>取消</a>
                <a class='layer_btn layer_btn_primary'>确认</a>
            </div>
        </div>
    </div> -->

    <!-- 脚本 -->
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script src="../js/main.js?rev=@@hash"></script>
    <script>
        (function(global,userUtil,layer){       
            var onlineBank=0;
            var sessionId =userUtil.sid();
            var orderNo;
            if(global.query){
                orderNo=global.query['orderNo'];
            }
            $(".submitBtn").click(function(){
                if(onlineBank==0){
                    window.location.href= global.localUrl + "wallet/alipay/alipayRefund?orderNo="+localStorage.getItem("orderNo")+"&sessionId="+sessionId; ///////支付宝线上还款
                    //window.location.href= global.localUrl + "wallet/callBack/callBackNotifyUrl?orderNo="+localStorage.getItem("orderNo")+"&sessionId="+sessionId; ///////支付宝线上还款
                }else if(onlineBank==1){
                    //window.location.href= global.localUrl + "trust/underLineRepay.html?orderNo="+orderNo;  ///////支付宝线下还款
                    window.location.href= "underLineRepay.html?orderNo="+orderNo;  ///////支付宝线下还款
                }

                
            })
            var $input = $(".fake-box input");  
            $("#pwd-input").on("input", function() {
                var pwd = $(this).val().trim();  
                for (var i = 0, len = pwd.length; i < len; i++) {  
                    $input.eq("" + i + "").val(pwd[i]);  
                }  
                $input.each(function() {  
                    var index = $(this).index();  
                    if (index >= len) {  
                        $(this).val("");  
                    }  
                });  
                if (len == 6) {
                    //执行其他操作  
                }  
            });     
            // $(".confirm .layer_btn").eq(0).on("click", function () {
            //     $(".confirm").css("display","none");
            //  });
            // $(".confirm .layer_btn").eq(1).off("click").on("click", function () {
            //     var _data={
            //         "sessionId": sessionId,
            //         "orderNo": orderNo,
            //         "payPassword": $(".fake-box input").eq(0).val()+$(".fake-box input").eq(1).val()+$(".fake-box input").eq(2).val()+$(".fake-box input").eq(3).val()+$(".fake-box input").eq(4).val()+$(".fake-box input").eq(5).val(),
            //         "offineRefundType" : "2"
            //     }
            //     $.ajax({
            //         url: global.localUrl + "wallet/orders/onlineRefund",
            //         type: "post",
            //         data: JSON.stringify(_data),
            //         contentType: 'application/json;charset=utf-8',
            //         success: function (re) {
            //             if (1 == re.code) {
            //                 layer.tips("还款成功");
            //                 setTimeout(function(){
            //                     //window.location.href=global.localUrl +"index.html";
            //                 },2000);
            //             }
            //             else{
            //                 setTimeout(function(){
            //                     //window.location.reload();
            //                 },2000);
            //                 layer.tips(re.message);
            //             }
            //         },
            //         error: function () {
            //             layer.tips(global.netError);
            //         }
            //     });
            //     close();
            // });
            // function close() {
            //     $(".confirm").removeClass("on");
            // }

            $(".cell_Icon").eq(0).click(function(){
                $(".cell_Icon").eq(0).html("<i></i>");
                $(".cell_Icon").eq(1).html("");
                onlineBank=0;
            })
            $(".cell_Icon").eq(1).click(function(){
                $(".cell_Icon").eq(0).html("");
                $(".cell_Icon").eq(1).html("<i></i>");
                onlineBank=1;
            })
            // $(".cell_Icon").eq(2).click(function(){
            //     $(".cell_Icon").eq(0).html("");
            //     $(".cell_Icon").eq(1).html("");
            //     $(".cell_Icon").eq(2).html("<i></i>");
            //     onlineBank=2;
            // })
                // var _data={
                //     "sessionId": sessionId,
                //     "orderNo": localStorage.getItem("orderNo"),
                //     "payPassword": $(".fake-box input").eq(0).val()+$(".fake-box input").eq(1).val()+$(".fake-box input").eq(2).val()+$(".fake-box input").eq(3).val()+$(".fake-box input").eq(4).val()+$(".fake-box input").eq(5).val()
                // }
            //初始化线上还款信息
            function onlineRepay(){
                var _data={
                    "sessionId": sessionId,
                    "orderNo": localStorage.getItem("orderNo"),
                    "offineRefundType" : "2"
                }
                $.ajax({
                    url: global.localUrl + "wallet/orders/onlineRefundApply",
                    type: "post",
                    data: JSON.stringify(_data),
                    contentType: 'application/json;charset=utf-8',
                    success: function (re) {
                        if (1 == re.code) {
                            re.data.refundTime;
                            // layer.tips("认证成功");
                            // setTimeout(function(){
                            //     window.location.href=global.localUrl +"trust/identification.html";
                            // },2000);
                            var paymentChannelName;
                            for(var i=0;i<re.data.sysPaymentChannelResponseList.length;i++){
                                if(re.data.sysPaymentChannelResponseList[i].type==1){
                                    paymentChannelName=re.data.sysPaymentChannelResponseList[i].paymentChannelName;
                                }
                            }
                            $(".repayDate").html(re.data.refundTime+"应还款");
                            $(".repayTatal").html(re.data.refundAmount);
                            $(".cell_cn input").eq(0).val(re.data.orderNo);
                            $(".cell_cn input").eq(1).val(re.data.applyAmount+"元");
                            $(".cell_cn input").eq(2).val(re.data.interest+"元");
                            // $(".cell_hd").eq(5).html(paymentChannelName);
                        }
                        else{

                            layer.tips(re.message);
                        }
                    },
                    error: function () {
                        layer.tips(global.netError);
                    }
                });
            }
            onlineRepay();


            $(".cells_tips a").click(function(){
                //window.location.href=global.localUrl +"trust/underLineRepay.html?orderNo="+orderNo;
                window.location.href="underLineRepay.html?orderNo="+orderNo;
            })

        })(global,userUtil,layer)
    </script>
</body>
</html>